<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/bootstrap-4.6.2-dist/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="/css/bootstrap-4.6.2-dist/js/bootstrap.min.js"></script>
</head>


<body>
<div class="container">
    <div class="row justify-content-center mt-5">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h3 class="text-center" id="loginDesc">用户名密码登录</h3>
                </div>
                <div class="card-body">
                    <form>
                        <!--     1；用户名密码登录 ，2 Ldap用户名密码登录      -->
                        <input type="hidden" id="loginType" value="username">
                        <div class="form-group">
                            <label for="username">Username</label>
                            <input type="text" class="form-control" id="username" placeholder="用户名">
                        </div>
                        <div class="form-group">
                            <label for="password">Password</label>
                            <input type="password" class="form-control" id="password" placeholder="密码">
                        </div>
                        <button type="submit" id="login-sub" class="btn btn-primary btn-block">登录</button>
                        <hr>
                    </form>
                    <div style="float: right">
                    <button type="button" class="btn btn-info" id="simplLogin">用户名密码</button>
                    <button type="button" class="btn btn-success" id="ldapLogin">Ldap登录</button>
                    <button type="button" class="btn btn-dark" id="githubLogin">GitHub登录</button>

                    </div>
<!--                    <a href="#" class="btn btn-secondary btn-block" id="simplLogin"><i class="fab fa-github"></i>用户名密码登录</a>-->
<!--                    <a href="#" class="btn btn-secondary btn-block" id="ldapLogin"><i class="fab fa-github"></i>Ldap 登录</a>-->
<!--                    <a href="#" class="btn btn-secondary btn-block" id="githubLogin"><i class="fab fa-github"></i>GitHub 登录</a>-->
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    $(function () {

        $("#simplLogin").hide();

        $("#ldapLogin").click(function() {
            $("#loginDesc").html("Ldap 登录")
            $("#loginType").val("ldap");
            $("#simplLogin").show();
            $("#ldapLogin").hide();

        });

        $("#simplLogin").click(function() {
            $("#loginDesc").html("用户名密码登录")
            $("#loginType").val("username");
            $("#ldapLogin").show();
            $("#simplLogin").hide();
        });


        $('#login-sub').click(function (event) {
            event.preventDefault();
            let username = $("#username").val()
            let password = $("#password").val()
            if (username === '' || password ===''){
                alert("用户名或密码不能为空")
                return
            }
            let loginType = $("#loginType").val()
            let data = {"username": username, "password": password, "loginType": loginType};

            $.ajax({
                url: "/login",
                type: "POST",
                dataType: "json",
                data: data,
                contentType: "application/x-www-form-urlencoded",
                success: function (responseData) {
                    if (responseData.code == 200) {
                        localStorage.setItem("token", responseData.data.token);
                        localStorage.setItem("loginName", responseData.data.loginName);
                        localStorage.setItem("loginAccount", responseData.data.loginAccount);

                        window.location.href = "/";

                    } else {
                        alert(responseData.message)
                    }
                },
                error: function () {
                    console.log("出错啦...");
                }
            });
        });

        $("#githubLogin").click(function () {

            $.get("/auth/github",{},function (resp) {
                if (resp.code === 200) {
                    let  githubUrl =resp.data;
                    const windowWidth = 500; // 窗口宽度
                    const windowHeight = 500; // 窗口高度

                // 计算窗口左上角的位置
                    const windowLeft = (window.screen.width - windowWidth) / 2;
                    const windowTop = (window.screen.height - windowHeight) / 2

                    window.open(githubUrl, 'newwindow', `height=${windowHeight}, width=${windowWidth}, top=${windowTop}, left=${windowLeft}, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no`);                    // 监听从子窗口发送的消息
                    window.addEventListener("message", function (event) {
                        if (event.origin === window.location.origin) {
                            // 接收到来自子窗口的消息
                            const message = event.data;
                            if (message != null && 200 == message.code) {
                                localStorage.setItem("token", message.token);
                                localStorage.setItem("loginName", message.loginName);
                                localStorage.setItem("loginAccount", message.loginAccount);
                                window.location.href = "/";
                            } else {
                                alert("登录失败！")
                            }
                        }
                    });
                }
            })
        })
    });


</script>
</html>